<template>
  <div>

    <div class="header">
<!--
      <div style="margin-right:20px">
        <Button class="button" type="info" @click="toAdd">新增医生</Button>
      </div> -->

      <div class="input">
        <i-form :model="formItem" style="width:150px;margin-top:15px">
          <Form-item label="">
              <i-input :value.sync="formItem.input" placeholder="请输入账号"></i-input>
          </Form-item>
        </i-form>
      </div>

      <div>
         <Button class="button" type="info" @click="toCheck">查找</Button>
      </div>
    </div>

    <!-- 表单 -->
    <Table
      border
      :columns="addUser"
      :data="list"
    >
    <!-- 账号 -->
      <template
        slot-scope="{ row }"
        slot="account"
      >
        <strong>{{ row.account }}</strong>
      </template>

      <!-- 性别 -->
      <template slot-scope="{ row }" slot="sex">
          <span v-if="row.sex=='1'">男</span>
          <span v-if="row.sex=='0'">女</span>
      </template>

      <!-- 职位 -->
      <template slot-scope="{ row }" slot="role">
          <span v-if="row.role=='1'">子女</span>
          <span v-if="row.role=='2'">护工</span>
          <span v-if="row.role=='3'">医生</span>
      </template>

      <template slot-scope="{ row }" slot="job_img">
        <img width="70%" :src="row.job_img" alt="">
      </template>

      <template
        slot-scope="{ row, index }"
        slot="action"
      >
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
        >编辑</Button>
        <Button
          type="error"
          size="small"
          @click="remove(index)"
        >删除</Button>
      </template>
    </Table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formItem: {
        input: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        account: undefined,
        nackname: undefined,
        sort: '+id'
      },
      addUser: [
        {
          title: '账号',
          slot: 'account'
        },
        {
          title: '名字',
          key: 'realname'
        },
        {
          title: '年龄',
          key: 'age'
        },
        // {
        //   title: '性别',
        //   slot: 'sex'
        // },
        {
          title: '邮箱',
          key: 'email'
        },
        {
          title: '职业证明',
          slot: 'job_img'
        },
        {
          title: '职业',
          slot: 'role'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      list: [
        {
          id: '001',
          account: '13456332369',
          name: '皮卡丘',
          age: '43',
          sex: '女',
          email: '864423@qq.com'
        },
        {
          id: '002',
          account: '13536300833',
          name: '抖抖',
          age: '18',
          sex: '男',
          email: '12345@qq.com'
        },
        {
          id: '003',
          account: '13951230860',
          name: '小黄',
          age: '33',
          sex: '女',
          email: '237850@qq.com'
        }
      ]
    }
  },
  created () {
    console.log('初始化')
    this.getList()
  },
  methods: {

    // 获取数据
    getList () {
      this.listLoading = true
      // 发起请求
      this.$http({
        url: '/getUserListByyihu', // 请求地址
        method: 'get', // 设置请求方式
        params: this.listQuery // 把注册参数放进请求中
      })
        .then((e) => { // 处理请求返回的结果
          console.log(e.data)
          this.list = e.data.user
          // this.total = e.data.total
          // this.listLoading = false
        })
        .catch((e) => { // 处理请求发生的异常
          console.log(e)
        })
    },
    toCheck () {
      console.log('编辑')
    },
    // 模糊查询
    likeQuerying () {
      const account = this.listQuery.account
      const nackname = this.listQuery.nackname

      console.log(account)
      console.log(nackname)
      console.log(status)
      // 发起请求
      this.$http({
        url: '/likeQuerying', // 请求地址
        method: 'post', // 设置请求方式
        data: {
          account: account,
          nackname: nackname,
          status: [0, 3]
        }// 把注册参数放进请求中
      })
        .then((e) => { // 处理请求返回的结果
          console.log(e.data)
          this.list = e.data
          this.listLoading = false
        })
        .catch((e) => { // 处理请求发生的异常
          console.log(e)
        })
    },

    resetForm () {
      this.addUser = {
        id: undefined,
        account: '',
        name: '',
        age: '',
        sex: '',
        email: ''
      }
    },
    show (index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.list[index].name}<br>Age：${this.list[index].age}<br>Address：${this.list[index].address}`
      })
    },
    remove (index) {
      this.list.splice(index, 1)
    },
    // 增加用户
    toAdd () {
      console.log('增加用户')
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // 关闭时清除
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      // this.$router.replace({
      //   path: 'add'
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.button {
  margin: 10px;
}
.header{
  display: flex;
  align-items: center;
}
.header .input{
  margin-top:10px
}
</style>
